<template>
  <div class="app-container">
    <IntroduceTip :value="12"></IntroduceTip>
    <div class="custom_card_0">
      <el-form :model="queryParams" inline ref="queryForm" label-width="115px">

        <el-form-item label="还车时间" prop="dateRange" label-width="auto">
          <el-date-picker clearable size="small" v-model="dateRange" type="daterange" range-separator="至"
                          value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" :picker-options="pickerOptions" @change="getDateRange"></el-date-picker>
        </el-form-item>

        <el-form-item label="门店" prop="storeId">
          <el-select v-model="queryParams.storeId" clearable >
            <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">
            搜索
          </el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetQuery">
            重置
          </el-button>
        </el-form-item>

      </el-form>
    </div>
    <el-row :gutter="10" class="mb8" type="flex" justify="end">
      <el-tooltip placement="right-start">
        <div slot="content" style="font-size: 14px">
         统计OTA订单列表中各个平台订单情况，通过设置分佣比例，查看分佣后各个平台营收情况。
        </div>
        <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
      </el-tooltip>
        <el-button type="primary" size="mini" @click="settingRatio">设置分佣比例</el-button>

    </el-row>

    <div class="custom_card">
      <el-table ref="tables" v-loading="loading" :data="dataList" border stripe
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
        <template slot="empty">
          <el-empty :image-size="50" description="暂无数据"></el-empty>
        </template>
        <el-table-column label="平台" min-width="200px" show-overflow-tooltip align="center" prop="orderSource"/>
        <el-table-column label="已还车订单数" min-width="200px" show-overflow-tooltip align="center" prop="orderNum"/>
        <el-table-column label="租金总额" min-width="200px" show-overflow-tooltip align="center" prop="actualAmount"/>
        <el-table-column label="分佣比例" min-width="200px" show-overflow-tooltip align="center" prop="proportion"/>
        <el-table-column label="分佣后租金" min-width="200px" show-overflow-tooltip align="center" prop="amountAfterCommission"/>
      </el-table>
    </div>
    <!--   设置分佣比例弹框   -->
    <el-dialog
      title="分佣比例配置"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <el-table ref="tables" v-loading="loading" :data="ratioList" border stripe
                  :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <template slot="empty">
            <el-empty :image-size="50" description="暂无数据"></el-empty>
          </template>
          <el-table-column label="OTA平台" min-width="200px" align="center" prop="otaName"/>
          <el-table-column label="分佣比例" min-width="200px" align="center">
            <template v-slot="{row}">
              <el-input-number v-model="row.proportion" :min="0" :max="99"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfim">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {ratioList, saveRatio,otaOrderReportList} from "@/api/bills/financial";
import moment from "moment"
import {getAllStore} from "@/api/store/store";
export default {
  data() {
    return {
      showTip:true,
      dialogVisible: false,
      loading: false,
      pickerOptions: {
        // disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
        disabledDate: (time) => {
          // 如果函数处理比较简单,可以直接在这里写逻辑方法
          return time.getTime() > Date.now()
        }
      },
      // 门店数据
      storeOptions: [],
      dataList: [],
      ratioList:[],
      // 查询参数
      queryParams: {
        storeId:null,
        storeName: null,
        startTime: moment().startOf('month').format('YYYY-MM-DD'),
        endTime: moment().startOf('day').format('YYYY-MM-DD'),
      },
      dateRange: [moment().startOf('month').format('YYYY-MM-DD'),moment().startOf('day').format('YYYY-MM-DD')]
    }
  },
  created() {
    this.getAllStore();
  },
  methods: {
    closeTip(){
      this.showTip = false;
    },
    getList() {
      otaOrderReportList(this.queryParams).then(res=>{
        this.dataList = res.data;
      })
    },
    /** 查询部门下拉树结构 */
    getAllStore() {
      getAllStore().then((response) => {
        this.storeOptions = response.data;
        if(this.storeOptions.length>0){
          this.queryParams.storeId = this.storeOptions[0].storeId;
        }
        this.getList();
      })
    },
    settingRatio() {
      ratioList().then(res=>{
        this.ratioList = res.rows;
      })
      this.dialogVisible = true;
    },
    handleConfim() {
      saveRatio(this.ratioList).then(res=>{
        this.$message({message:'设置成功', type:'success'})
        this.getList();
      })

      this.dialogVisible = false;
    },
    //时间发生改变
    getDateRange(e) {
      this.queryParams.startTime = e[0];
      this.queryParams.endTime = e[1];
      this.getList();
    },
    //执行搜索
    handleQuery() {
      this.getList();
    },
    //重置搜索
    resetQuery() {
      this.queryParams = {
        storeId:null,
        storeName: null,
        startTime: null,
        endTime: null,
      };
      this.dateRange=[],
      this.resetForm("queryForm")
      this.handleQuery()
    },

  }
}
</script>

<style scoped>

</style>
